<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配送员获取顾客端OpenID - 前端实现测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .demo-section {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .demo-section h2 {
            color: #333;
            margin-bottom: 20px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }

        .flow-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .flow-step {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            border-left: 5px solid #667eea;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .flow-step:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .flow-step .step-number {
            position: absolute;
            top: -10px;
            left: 20px;
            background: #667eea;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .flow-step h3 {
            color: #333;
            margin-bottom: 15px;
            margin-top: 10px;
        }

        .flow-step p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin: 15px 0;
        }

        .code-block .comment {
            color: #68d391;
        }

        .code-block .keyword {
            color: #f687b3;
        }

        .code-block .string {
            color: #fbb6ce;
        }

        .simulation-area {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin-top: 20px;
        }

        .simulation-buttons {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background: #5a67d8;
            transform: translateY(-2px);
        }

        .btn-success {
            background: #48bb78;
            color: white;
        }

        .btn-success:hover {
            background: #38a169;
            transform: translateY(-2px);
        }

        .btn-warning {
            background: #ed8936;
            color: white;
        }

        .btn-warning:hover {
            background: #dd6b20;
            transform: translateY(-2px);
        }

        .simulation-log {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            height: 300px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
        }

        .log-entry {
            margin-bottom: 8px;
            padding: 5px 0;
        }

        .log-info {
            color: #63b3ed;
        }

        .log-success {
            color: #68d391;
        }

        .log-warning {
            color: #fbb6ce;
        }

        .log-error {
            color: #fc8181;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .feature-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
        }

        .feature-card .icon {
            font-size: 3em;
            margin-bottom: 15px;
        }

        .feature-card h3 {
            margin-bottom: 10px;
        }

        .feature-card p {
            opacity: 0.9;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .flow-container {
                grid-template-columns: 1fr;
            }
            
            .simulation-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 配送员获取顾客端OpenID</h1>
            <p>前端实现方案 - 跨小程序授权流程演示</p>
        </div>

        <div class="demo-section">
            <h2>📋 实现流程概览</h2>
            <div class="flow-container">
                <div class="flow-step">
                    <div class="step-number">1</div>
                    <h3>配送员登录</h3>
                    <p>配送员在配送端小程序进行微信登录，后端检查是否缺少顾客端openid</p>
                    <div class="code-block">
<span class="comment">// 配送端登录检查</span>
<span class="keyword">if</span> (data.needCustomerOpenid) {
  <span class="keyword">await</span> <span class="keyword">this</span>.jumpToCustomerMiniProgram()
}
                    </div>
                </div>

                <div class="flow-step">
                    <div class="step-number">2</div>
                    <h3>跳转授权</h3>
                    <p>显示授权提示，用户确认后跳转到顾客端小程序进行授权</p>
                    <div class="code-block">
<span class="comment">// 跳转到顾客端</span>
uni.navigateToMiniProgram({
  appId: <span class="string">'customer_appid'</span>,
  path: <span class="string">`/pages/auth/openid?deliveryOpenid=${openid}`</span>
})
                    </div>
                </div>

                <div class="flow-step">
                    <div class="step-number">3</div>
                    <h3>获取OpenID</h3>
                    <p>顾客端小程序自动进行微信登录，获取openid并调用后端接口保存</p>
                    <div class="code-block">
<span class="comment">// 顾客端获取openid</span>
<span class="keyword">const</span> loginResult = <span class="keyword">await</span> getWechatLoginCode()
<span class="keyword">await</span> saveCustomerOpenid(loginResult.code)
                    </div>
                </div>

                <div class="flow-step">
                    <div class="step-number">4</div>
                    <h3>返回配送端</h3>
                    <p>授权完成后自动返回配送端小程序，配送员可以正常使用分账功能</p>
                    <div class="code-block">
<span class="comment">// 返回配送端</span>
uni.navigateBackMiniProgram({
  success: () => {
    console.log(<span class="string">'返回配送端成功'</span>)
  }
})
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>🎮 交互流程模拟</h2>
            <div class="simulation-area">
                <div class="simulation-buttons">
                    <button class="btn btn-primary" onclick="simulateDeliveryLogin()">配送员登录</button>
                    <button class="btn btn-warning" onclick="simulateJumpToCustomer()">跳转顾客端</button>
                    <button class="btn btn-success" onclick="simulateCustomerAuth()">顾客端授权</button>
                    <button class="btn btn-primary" onclick="simulateReturnToDelivery()">返回配送端</button>
                    <button class="btn" onclick="clearLog()" style="background: #718096; color: white;">清空日志</button>
                </div>
                <div class="simulation-log" id="simulationLog"></div>
            </div>
        </div>

        <div class="demo-section">
            <h2>🔧 核心代码实现</h2>
            
            <h3>配送端 - 用户Store (delivery/store/user.js)</h3>
            <div class="code-block">
<span class="comment">// 检查是否需要获取顾客端openid</span>
<span class="keyword">if</span> (data.needCustomerOpenid) {
  <span class="keyword">await</span> <span class="keyword">this</span>.jumpToCustomerMiniProgram(data.deliveryOpenid)
  <span class="keyword">return</span> data
}

<span class="comment">// 跳转到顾客端小程序获取openid</span>
<span class="keyword">async</span> jumpToCustomerMiniProgram(deliveryOpenid) {
  <span class="keyword">return</span> <span class="keyword">new</span> Promise((resolve, reject) => {
    uni.showModal({
      title: <span class="string">'需要获取授权'</span>,
      content: <span class="string">'为了支持微信支付分账功能，需要跳转到顾客端小程序进行一次授权'</span>,
      success: (res) => {
        <span class="keyword">if</span> (res.confirm) {
          uni.navigateToMiniProgram({
            appId: <span class="string">'wx1234567890abcdef'</span>,
            path: <span class="string">`/pages/auth/openid?deliveryOpenid=${deliveryOpenid}`</span>
          })
        }
      }
    })
  })
}
            </div>

            <h3>顾客端 - 授权页面 (customer/pages/auth/openid.vue)</h3>
            <div class="code-block">
<span class="comment">// 开始授权流程</span>
<span class="keyword">const</span> startAuth = <span class="keyword">async</span> () => {
  <span class="keyword">try</span> {
    <span class="comment">// 获取微信登录code</span>
    <span class="keyword">const</span> loginResult = <span class="keyword">await</span> getWechatLoginCode()
    
    <span class="comment">// 调用后端接口保存openid</span>
    <span class="keyword">await</span> saveCustomerOpenid(loginResult.code)
    
    <span class="comment">// 显示成功并返回配送端</span>
    showSuccess(<span class="string">'授权成功！即将返回配送端'</span>)
    setTimeout(() => {
      returnToDelivery()
    }, 3000)
  } <span class="keyword">catch</span> (error) {
    showError(<span class="string">'授权失败，请重试'</span>)
  }
}

<span class="comment">// 返回配送端小程序</span>
<span class="keyword">const</span> returnToDelivery = () => {
  uni.navigateBackMiniProgram({
    success: () => {
      console.log(<span class="string">'返回配送端成功'</span>)
    }
  })
}
            </div>

            <h3>顾客端 - API接口 (customer/api/wechat.js)</h3>
            <div class="code-block">
<span class="comment">/**
 * 获取顾客端openid并绑定到配送员
 * @param {Object} params - 包含code和deliveryOpenid的参数对象
 */</span>
<span class="keyword">export</span> <span class="keyword">function</span> getCustomerOpenid(params) {
  <span class="keyword">return</span> request({
    url: <span class="string">'/wechat/getCustomerOpenid'</span>,
    method: <span class="string">'POST'</span>,
    data: params
  })
}
            </div>
        </div>

        <div class="demo-section">
            <h2>✨ 方案特点</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="icon">🔒</div>
                    <h3>安全可靠</h3>
                    <p>通过微信官方跨小程序跳转机制，确保数据传输安全</p>
                </div>
                <div class="feature-card">
                    <div class="icon">⚡</div>
                    <h3>一次授权</h3>
                    <p>每个配送员只需要授权一次，后续登录无需重复操作</p>
                </div>
                <div class="feature-card">
                    <div class="icon">🎯</div>
                    <h3>用户友好</h3>
                    <p>清晰的引导流程和进度提示，提升用户体验</p>
                </div>
                <div class="feature-card">
                    <div class="icon">🔧</div>
                    <h3>易于维护</h3>
                    <p>模块化设计，代码结构清晰，便于后续维护和扩展</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let logCounter = 0;

        function addLog(message, type = 'info') {
            const logElement = document.getElementById('simulationLog');
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry log-${type}`;
            logEntry.innerHTML = `[${timestamp}] ${message}`;
            logElement.appendChild(logEntry);
            logElement.scrollTop = logElement.scrollHeight;
            logCounter++;
        }

        function simulateDeliveryLogin() {
            addLog('🚀 配送员开始登录...', 'info');
            setTimeout(() => {
                addLog('📡 调用微信登录接口 wx.login()', 'info');
            }, 500);
            setTimeout(() => {
                addLog('🔍 后端检查配送员信息...', 'info');
            }, 1000);
            setTimeout(() => {
                addLog('⚠️  检测到缺少顾客端openid', 'warning');
            }, 1500);
            setTimeout(() => {
                addLog('💡 返回 needCustomerOpenid: true', 'warning');
            }, 2000);
            setTimeout(() => {
                addLog('📋 显示授权确认弹窗', 'info');
            }, 2500);
        }

        function simulateJumpToCustomer() {
            addLog('🔄 用户确认授权，准备跳转...', 'info');
            setTimeout(() => {
                addLog('📱 调用 uni.navigateToMiniProgram()', 'info');
            }, 500);
            setTimeout(() => {
                addLog('🎯 跳转到顾客端小程序', 'success');
            }, 1000);
            setTimeout(() => {
                addLog('📄 打开授权页面 /pages/auth/openid', 'success');
            }, 1500);
            setTimeout(() => {
                addLog('📦 传递参数: deliveryOpenid', 'info');
            }, 2000);
        }

        function simulateCustomerAuth() {
            addLog('🔐 顾客端开始授权流程...', 'info');
            setTimeout(() => {
                addLog('📡 调用微信登录获取code', 'info');
            }, 500);
            setTimeout(() => {
                addLog('🌐 调用后端接口 /wechat/getCustomerOpenid', 'info');
            }, 1000);
            setTimeout(() => {
                addLog('💾 保存顾客端openid到配送员记录', 'info');
            }, 1500);
            setTimeout(() => {
                addLog('✅ 授权成功！openid绑定完成', 'success');
            }, 2000);
            setTimeout(() => {
                addLog('⏰ 3秒后自动返回配送端...', 'info');
            }, 2500);
        }

        function simulateReturnToDelivery() {
            addLog('🔙 返回配送端小程序...', 'info');
            setTimeout(() => {
                addLog('📱 调用 uni.navigateBackMiniProgram()', 'info');
            }, 500);
            setTimeout(() => {
                addLog('🎯 成功返回配送端', 'success');
            }, 1000);
            setTimeout(() => {
                addLog('🔄 配送端检测到从其他小程序返回', 'info');
            }, 1500);
            setTimeout(() => {
                addLog('🔍 重新检查登录状态...', 'info');
            }, 2000);
            setTimeout(() => {
                addLog('✅ 登录成功！已具备分账功能', 'success');
            }, 2500);
            setTimeout(() => {
                addLog('🎉 流程完成！配送员可正常使用', 'success');
            }, 3000);
        }

        function clearLog() {
            document.getElementById('simulationLog').innerHTML = '';
            logCounter = 0;
            addLog('📝 日志已清空，可以重新开始演示', 'info');
        }

        // 页面加载时的欢迎信息
        window.onload = function() {
            addLog('🎉 欢迎使用配送员获取顾客端OpenID演示系统', 'success');
            addLog('💡 点击上方按钮体验完整的授权流程', 'info');
        };
    </script>
</body>
</html>